<template>
  <div>
    <div class="search_box">
      <p>设备编号：</p>
      <el-input v-model="input" placeholder="请输入内容"></el-input>
      <el-button
        type="primary"
        icon="el-icon-search"
        style="background: #5c84ff"
        @click="queryEquipment"
        >查询</el-button
      >
    </div>
    <div class="table_box">
      <!-- <div class="btn">
        <el-button
          type="primary"
          icon="el-icon-circle-plus-outline"
          style="background: linear-gradient(to right, #ff8f3e, #ff6927)"
          @click="buildEquipment"
          >新建</el-button
        >
        <el-button style="background: #fcf4ef" @click="batch"
          >批量操作</el-button
        >
      </div> -->
      <el-table
        :data="equipmentList"
        style="width: 100%; color: #666,border-bottom:none"
        :border="false"
        :header-cell-style="{ background: '#f3f6fa', color: '#666' }"
        ref="tableRef"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          :index="indexMethod"
        ></el-table-column>
        <el-table-column prop="innerCode" label="设备编号" ref="vmTable">
        </el-table-column>
        <el-table-column prop="typeName" label="设备型号"> </el-table-column>
        <el-table-column prop="nodeName" label="详细地址"> </el-table-column>
        <el-table-column prop="vmStatus" label="运营状态"> </el-table-column>
        <el-table-column prop="ownerName" label="设备状态">
          <el-tag style="background-color: #ffb325">离线</el-tag>
          <el-tag>货道</el-tag>
          <el-tag>传动轴</el-tag>
        </el-table-column>
        <el-table-column prop="address" label="操作">
          <!-- 通过插槽获取单行的数据 -->
          <template #default="scope">
            <el-button
              type="text"
              style="padding: 0"
              @click="getDetails(scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination-container" v-if="equipmentList.length !== 0">
        <el-pagination layout="slot">
          <template>
            <span
              >共{{ page.totalCount }}条记录 第{{ page.pageIndex }}/{{
                page.totalPage
              }}页</span
            >
            <div class="btn">
              <button
                :disabled="page.pageIndex === '1'"
                @click="change_page(-1)"
              >
                上一页
              </button>
              <button
                :disabled="page.totalPage === page.pageIndex"
                @click="change_page(1)"
              >
                下一页
              </button>
            </div>
          </template>
        </el-pagination>
      </div>
    </div>

    <!-- 查看详情弹出框 -->

    <el-dialog title="设备详情" :visible.sync="dialogVisible" width="630px">
      <div class="info">
        <span
          >销售量：<i>{{ count }}个</i></span
        >
        <span
          >销售额：<i>{{ amount }}元</i></span
        >
        <span
          >补货次数：<i>{{ supplyCount }}次</i></span
        >
        <span
          >维修次数：<i>{{ repairCount }}次</i></span
        >
      </div>
      <div class="title">商品销量（月）</div>
      <!-- <div class="table">
        <div class="card"><span>茉莉花茶 </span><i>: 446</i></div>
      </div> -->
      <table v-if="skuCollect.length !== 0">
        <tr>
          <td v-for="(item, index) in skuCollect" :key="index">
            <div class="name">{{ item.skuName }}</div>
            <i>: {{ item.count }}</i>
          </td>
        </tr>
      </table>
      <div class="tip" v-else>当前设备未销售商品</div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getEquipment,
  getOrderCount,
  getOrderAmount,
  getSupplyCount,
  getRepairCount,
  getSkuCollect
} from '@/api/equipment'
// import { Message } from 'element-ui'
export default {
  name: 'equipment-page',
  created() {
    this.getEquipment()
  },
  data() {
    return {
      // 查看详情弹出框
      dialogVisible: false,
      // 每页数量
      page: {
        pageIndex: '1',
        pageSize: '10',
        totalCount: '110',
        totalPage: '11'
      },

      // 输入框
      input: '',
      // 设备列表
      equipmentList: [],

      // 收入
      amount: 0,
      // 订单总数
      count: 0,
      // 补货次数
      supplyCount: 0,
      // 维修次数
      repairCount: 0,
      // 商品销量
      skuCollect: []
    }
  },
  methods: {
    // 获取页面数据
    async getEquipment(obj) {
      try {
        const res = await getEquipment(obj)
        console.log('设备列表', res)
        this.page = {
          pageIndex: res.pageIndex,
          pageSize: res.pageSize,
          totalCount: res.totalCount,
          totalPage: res.totalPage
        }
        // 处理数据
        this.equipmentList = res.currentPageRecords.map((item, index) => {
          let str = ''
          if (item.vmStatus === 0) str = '未投放'
          if (item.vmStatus === 1) str = '运营'
          if (item.vmStatus === 3) str = '撤机'
          const obj = {
            innerCode: item.innerCode,
            typeName: item.type.name,
            nodeName: item.node.name,
            ownerName: item.ownerName,
            vmStatus: str
          }
          return obj
        })
      } catch (error) {}
    },

    // 下一页上一页
    change_page(num) {
      this.page.pageIndex = Number(this.page.pageIndex) + num
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize
      }
      this.getEquipment(obj)
    },

    // 查询设备
    queryEquipment() {
      const obj = {
        pageIndex: this.page.pageIndex,
        pageSize: this.page.pageSize,
        innerCode: this.input
      }
      this.getEquipment(obj)
    },

    // 表格序号
    indexMethod(index) {
      // 当前页数减一 乘以 每页个数 加 索引值(从零开始）+1
      return (this.page.pageIndex - 1) * this.page.pageSize + index + 1
    },

    // 查看详情
    async getDetails(row) {
      // 如果写了时间就以写的为准 如果没写就按当前时间
      // const time = this.$moment().format('YYYY-MM-01 00:00:00')
      // console.log(time)
      let start = this.$moment().format('YYYY-MM-01 00:00:00')
      let end = this.$moment().format('YYYY-MM-DD 23:59:59')
      const params = {
        start,
        end,
        innerCode: row.innerCode
      }

      // 获取收入
      this.amount = (await getOrderAmount(params)) / 100

      // 获取订单总数
      this.count = await getOrderCount(params)

      start = this.$moment().format('YYYY-MM-01')
      end = this.$moment().format('YYYY-MM-DD')

      // 获取补货次数
      this.supplyCount = await getSupplyCount(row.innerCode, start, end)

      // 获取维修次数
      this.repairCount = await getRepairCount(row.innerCode, start, end)

      // 获取商品销量
      this.skuCollect = await getSkuCollect(row.innerCode, start, end)
      console.log(this.skuCollect)
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss">
// 按钮通用样式
.el-button {
  padding: 10px 16px;
  border: none;
}
// 查询
.search_box {
  display: flex;
  align-items: center;
  height: 64px;

  margin-bottom: 20px;
  padding-left: 17px;
  .el-input {
    width: 200px;
    margin-right: 10px;
  }
  p {
    padding-right: 12px;
  }
}
// 表格
.table_box {
  padding: 20px 0 0 17px;
  .btn {
    margin-bottom: 20px;
  }
}
::v-deep .el-table th.el-table__cell.is-leaf {
  border: none;
}
::v-deep .el-table td.el-table__cell {
  border: none;
}
.el-table::before {
  height: 0px;
}
.pagination-container {
  padding: 32px 16px;
  width: 100%;
  span {
    float: left;
  }
  .btn {
    float: right;
  }
}

// tag 标签
.el-tag {
  color: #fff;
  font-size: 14px;
  background-color: #3fd08d;
  padding: 0 12px;
  border-radius: 16px;
  border: none;
  height: 24px;
  line-height: 24px;
  margin-right: 8px;
}

::v-deep .el-dialog {
  border-radius: 8px;
  .info {
    height: 54px;
    line-height: 54px;
    display: flex;
    span {
      flex: 1;
      margin-left: 16px;
      i {
        color: #5f84ff;
      }
    }
  }
  .title {
    margin: 20px 0 12px;
  }
  table {
    tr {
      display: flex;
      flex-wrap: wrap;
      td {
        display: flex;
        border: 1px solid #d8dde3;
        margin: 0px -1px -1px 0;
        padding: 0 10px;
        width: 147.5px;
        height: 40px;
        line-height: 40px;
        .name {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          width: 80px;
          padding-right: 2px;
        }
      }
    }
  }
  .tip {
    text-align: center;
  }
}
</style>
